<template>
  <div class="loadingBox">
    <van-overlay :show="isShow" z-index="99">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" color="#fff">Loading....</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: "loading",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    isShow: {
      get() {
        return this.show;
      },
      set(val) {
        return val;
      },
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.loadingBox {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 52px;
  width: 100%;
  min-height: calc(100vh - 52px);
  height: calc(100% - 52px);
  box-sizing: border-box;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
</style>